<template>
  <div class="editor-container">
    <a-layout>
      <a-layout-header class="header">
        <div class="page-title">
          <router-link to="/">
            <img alt="快享" class="logo-img" />
          </router-link>
        </div>
      </a-layout-header>
    </a-layout>
    <a-layout>
      <a-layout-sider width="300" style="background: #fff">
        <div class="sidebar-container">
          组件列表
          <ComponentsList :list="defaultTextTemplates" @onItemClick="addItem" />
        </div>
      </a-layout-sider>
      <!-- 中间区域 -->

      <a-layout style="padding: 0 24px 24px">
        <a-layout-content class="preview-container">
          <p>画布区域</p>
          <!-- <history-area /> -->
          <div class="preview-list" id="canvas-area">
            <EditWrapper
              v-for="component in components"
              :key="component.id"
              :id="component.id"
              @setActive="setActive"
              :is="component.name"
              v-bind="component.props"
              :active="component.id === currentElement?.id"
            >
              <component :is="component.name" v-bind="component.props">
                <template />
              </component>
            </EditWrapper>
          </div>
        </a-layout-content>
      </a-layout>
      <!-- 右侧区域 -->
      <a-layout-sider width="300" style="background: #fff" class="settings-panel">
        组件属性
        <PropsTable
          v-if="currentElement && currentElement.props"
          :props="currentElement.props"
          @change="handleChange"
        />
        <pre>
          {{ currentElement?.props }}
        </pre>
        <!-- <a-tabs type="card" v-model:activeKey="activePanel">
          <a-tab-pane key="component" tab="属性设置" class="no-top-radius">
            <div v-if="currentElement">
              <edit-group
                v-if="!currentElement.isLocked"
                :props="currentElement?.props"
                @change="handleChange"
              />

              <div v-else>
                <a-empty>
                  <template #description>
                    <p>该元素被锁定，无法编辑</p>
                  </template>
                </a-empty>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="layer" tab="图层设置">
            <layer-list
              :list="components"
              :selectedId="currentElement && currentElement.id"
              @change="handleChange"
              @select="setActive"
            />
          </a-tab-pane>
          <a-tab-pane key="page" tab="页面设置">
            <props-table :props="page.props" @change="pageChange"></props-table>
          </a-tab-pane>
        </a-tabs> -->
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { computed, toRef } from 'vue'
import { type ComponentData, useEditorStore } from '@/stores/editor'
import ComponentsList from '@/components/ComponentsList.vue'
import EditWrapper from '@/components/EditWrapper.vue'
import PropsTable from '@/components/PropsTable.vue'

// import PropsTable from '@/components/PropsTable'
import defaultTextTemplates from '@/mock/defaultTemplates'
import initContextMenu from '@/plugins/contextMenu'

const editorStore = useEditorStore()

const components = computed(() => editorStore.state.components)
const currentElement = computed(() => editorStore.getCurrentElement)

initContextMenu()
const addItem = (props: ComponentData) => {
  editorStore.addComponent(props)
}
const setActive = (id: string) => {
  editorStore.setActive(id)
}

const handleChange = (e: any) => {
  editorStore.updateComponent(e)
}
</script>

<!-- <script lang="ts">
import { computed, defineComponent, ref } from 'vue'
// import { useStore } from 'vuex'
// import { pickBy } from 'lodash-es'
// import { GlobalDataProps } from '@/store'
// import { ComponentData } from '@/store/editor'
// import initHotKeys from '@/plugins/hotKeys'
// import initContextMenu from '@/plugins/contextMenu'
// import ComponentsList from '@/components/ComponentsList.vue'
// import EditGroup from '../components/EditGroup.vue'
// import EditWrapper from '@/components/EditWrapper.vue'
// import PropsTable from '@/components/PropsTable.vue'
// import LayerList from '../components/LayerList.vue'
// import HistoryArea from './editor/HistoryArea.vue'

// import PropsTable from "../components/PropsTable";
// import defaultTextTemplates from '../defaultTemplates'
export type TabType = 'component' | 'layer' | 'page'
export default defineComponent({
  name: 'Editor',
  components: {
    ComponentsList,
    EditWrapper,
    PropsTable,
    LayerList,
    EditGroup,
    HistoryArea
  },
  setup() {
    initHotKeys()
    initContextMenu()
    const store = useStore<GlobalDataProps>()
    const components = computed(() => store.state.editor.components)
    const page = computed(() => store.state.editor.page)
    // const currentElement = computed<ComponentData | null>(
    //   () => store.getters.getCurrentElement
    // );
    const currentElement = computed<ComponentData | null>(() => store.getters.getElement())

    const activePanel = ref<TabType>('component')
    const addItem = (component: any) => {
      store.commit('addComponent', component)
    }
    const setActive = (id: string) => {
      store.commit('setActive', id)
    }
    const handleChange = (e: any) => {
      store.commit('updateComponent', e)
    }
    const pageChange = (e: any) => {
      console.log('page', e)
      store.commit('updatePage', e)
    }
    const updatePosition = (data: { left: number; top: number; id: string }) => {
      const { id } = data
      const updatedData = pickBy<number>(data, (v, k) => k !== 'id')
      const keysArr = Object.keys(updatedData)
      const valuesArr = Object.values(updatedData).map((v) => v + 'px')
      store.commit('updateComponent', { key: keysArr, value: valuesArr, id })
      // 此方法会在 历史记录内添加多条数据
      // forEach(updatedData, (value, key) => {
      //   store.commit("updateComponent", {
      //     key,
      //     value: value + "px",
      //     id,
      //   });
      // });
      // const { left, top, id } = data;
      // store.commit("updateComponent", { key: "left", value: left + "px", id });
      // store.commit("updateComponent", { key: "top", value: top + "px", id });
    }
    return {
      components,
      defaultTextTemplates,
      addItem,
      setActive,
      currentElement,
      handleChange,
      activePanel,
      page,
      pageChange,
      updatePosition
    }
  }
})
</script> -->
<style lang="scss" scoped>
.editor-container .preview-container {
  padding: 24px;
  margin: 0;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .preview-list {
    padding: 0;
    margin: 0;
    min-width: 375px;
    min-height: 200px;
    border: 1px solid #efefef;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    margin-top: 50px;
    max-height: 80vh;
  }
}
// 设置上传样式
.styled-uploader {
  .uploader-container {
    width: 100px;
    padding: 10px;
    color: #ffffff;
    background: #1890ff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .uploader-container:hover {
    background: #40a9ff;
  }
  .uploader-container h4 {
    color: #ffffff;
    margin-bottom: 0;
    margin-left: 10px;
  }
  .uploader-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
